<template>
  <view>
    <!-- 筛选 -->
    <view class="filter">
      <text class="active">综合</text>
      <text>销量</text>
      <text>价格</text>
    </view>
    <!-- 商品列表 -->
    <scroll-view class="goods" scroll-y @scrolltolower="loadingAdd">
      <view 
	  v-for="item in goodsList"
	  :key="item.goods_id"
	  class="item" 
	  @click="goDetail(item.goods_id)">
        <!-- 商品图片 -->
        <image class="pic" 
		:src="item.goods_small_logo"></image>
        <!-- 商品信息 -->
        <view class="meta">
          <view class="name">
            {{item.goods_name}}
          </view>
          <view class="price">
            <text>￥</text>
            {{item.goods_price}}
            <text>.00</text>
          </view>
        </view>
      </view>
      <!-- 加载更多 -->
      <view class="getMore" v-if="isMore">正在加载...</view>	 
	  <view class="tips">{{msg}}</view>
    </scroll-view>
  </view>
</template>

<script>
	import {getGoodsList} from '../../../api/index.js'
	import debounce from 'lodash/debounce'
export default {
	data(){
		return {
			query:'',
			pagenum:1,
			pagesize:5,
			goodsList:[],
			msg:'',
			isMore:true
		}
	},
	onLoad(options){
		// console.log(options)
		this.query=options.query
		this.getGoodsList()
	},
  methods: {
    goDetail(id) {
      uni.navigateTo({
        url: `/subpkg/pages/goods/index?id=${id}`
      });
    },
	async getGoodsList(){
		if(!this.isMore) {
			return
		}
		if(!this.query) return
		const {data} = await getGoodsList({
			query:this.query,
			pagenum:this.pagenum++,
			pagesize:this.pagesize
		})
		if(data.meta.status!==200){
			return uni.showToast({
				title:'数据请求失败',
				icon:'none'
			})
		}
		// this.goodsList=data.message.goods
		// 利用到数组的concat方法，将第二次的数据结果连接到上一次的数据上
		// this.goodsList=this.goodsList.concat(data.message.goods)
		this.goodsList.push(...data.message.goods)
		this.isMore=this.goodsList.length<data.message.total
		// console.log(data)
		// 请求结束后再显示提示信息
		 if(this.goodsList.length === 0) this.msg = '空空如也～'
	},
	// 下拉加载更多，也需要进行防抖
	loadingAdd:debounce(function(){
		this.getGoodsList()
		})
  }
};
</script>

<style scoped lang="scss">
.filter {
  display: flex;
  height: 96rpx;
  line-height: 96rpx;
  border-bottom: 1rpx solid #ddd;

  /* #ifdef H5 */
  position: relative;
  z-index: 99;
  /* #endif */

  text {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    color: #333;

    &.active {
      color: #ea4451;
    }
  }
}

.goods {
  position: absolute;
  width: 100%;
  top: 97rpx;
  bottom: 0;
}

.item {
  display: flex;
  padding: 30rpx 20rpx 30rpx 0;
  margin-left: 20rpx;
  border-bottom: 1rpx solid #eee;

  &:last-child {
    border-bottom: none;
  }

  .pic {
    width: 200rpx;
    height: 200rpx;
    margin-right: 30rpx;
  }

  .meta {
    flex: 1;
    font-size: 27rpx;
    color: #333;
    position: relative;
  }

  .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .price {
    position: absolute;
    bottom: 0;

    color: #ea4451;
    font-size: 33rpx;

    text {
      font-size: 22rpx;
    }
  }
}
</style>
